<template>
  <div>
    <el-select v-model="value" placeholder="请选择App>">
      <el-option
        v-for="item in options_name"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="value" placeholder="请选择App版本>">
      <el-option
        v-for="item in options_version"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <el-select v-model="value" placeholder="合并到>">
      <el-option
        v-for="item in options_version"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    <div class="box_state">
      <el-container>
        <el-header style=" font-size: 12px">
          <el-dropdown>
            <i style="margin-right: 15px">状态</i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>未测试</el-dropdown-item>
              <el-dropdown-item>正在测试</el-dropdown-item>
              <el-dropdown-item>可提审</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

      </el-container>
    </div>
    <div class="box_ipalist">
      <el-container>
        <el-header>
          <el-dropdown>
            <i style="margin-left: 15px">ipa列表</i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>ipa1</el-dropdown-item>
              <el-dropdown-item>ipa2</el-dropdown-item>
              <el-dropdown-item>ipa3</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

      </el-container>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">

        <span>设计清单列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addDesign">添加</el-button>
      </div>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="appv1" name="1">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="APP">
            </el-table-column>
            <el-table-column
              prop="describe"
              label="描述">
            </el-table-column>
            <el-table-column
              prop="version"
              label="app版本">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态">
            </el-table-column>

            <el-table-column
              prop="time"
              label="时间">
            </el-table-column>
            <el-table-column
              prop="level"
              label="级别">
            </el-table-column>
            <el-table-column
              prop="designated"
              label="负责人">
            </el-table-column>
            <el-table-column
              prop="operations"
              label="操作">
            </el-table-column>

          </el-table>
        </el-collapse-item>
        <el-collapse-item title="appv2" name="2">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="APP">
            </el-table-column>
            <el-table-column
              prop="describe"
              label="描述">
            </el-table-column>
            <el-table-column
              prop="version"
              label="app版本">
            </el-table-column>
            <el-table-column
              prop="state"
              label="状态">
            </el-table-column>

            <el-table-column
              prop="time"
              label="时间">
            </el-table-column>
            <el-table-column
              prop="level"
              label="级别">
            </el-table-column>
            <el-table-column
              prop="designated"
              label="负责人">
            </el-table-column>
            <el-table-column
              prop="operations"
              label="操作">
            </el-table-column>

          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>


  </div>
</template>

<script>
  export default {
    name: "DesignPage",
    data() {
      return {
        activeNames: ['0'],
        options_name: [{
          value: '选项1',
          label: 'app1'
        }, {
          value: '选项2',
          label: 'app2'
        }, {
          value: '选项3',
          label: 'app3'
        }, {
          value: '选项4',
          label: 'app4'
        }, {
          value: '选项5',
          label: 'app5'
        }],
        options_version: [{
          value: '选项1',
          label: '1'
        }, {
          value: '选项2',
          label: '2'
        }, {
          value: '选项3',
          label: '3'
        }, {
          value: '选项4',
          label: '4'
        }, {
          value: '选项5',
          label: '5'
        }],
        value: '',
        tableData: [{
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '1',
          operations: '删除',
          designated: '张三',
          level: '2',
          state: '看',
        }, {
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '2',
          operations: '删除',
          designated: '张三',
          level: '2',
          state: '看',
        }, {
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '3',
          operations: '删除',
          designated: '张三',
          level: '2',
          state: '看',
        }, {
          name: 'app1',
          time: '2020-7-7',
          describe: '描述',
          version: '4',
          operations: '删除',
          designated: '张三',
          level: '2',
          state: '看',
        }]
      }
    },
    methods: {
      addDesign() {
        this.$router.push("/bugPage")
      },
      handleChange(val) {
        console.log(val);
      }
    }

  }
</script>

<style scoped>
  .box_state, .box_ipalist {
    float: right;
    width: 120px;
    height: 30px;
    display: inline-block;
  }
.el-card{
  width: 100%;
}
  /*.box_ipalist{*/
  /*  width: 120px;*/
  /*  float: left;*/

  /*}*/
</style>

